<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>轮播图演示</title>
    <style>
        .carousel {
            width: 400px;
            height: 250px;
            overflow: hidden;
            position: relative;
            margin: 40px auto;
            border-radius: 16px;
            box-shadow: 0 4px 12px #aaa;
        }

        .carousel img {
            width: 400px;
            height: 250px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: opacity 1s;
        }

        .carousel img.active {
            opacity: 1;
            z-index: 2;
        }
    </style>
</head>
<body>
<h2 style="text-align: center">轮播图演示</h2>
<div class="carousel" id="carousel">
    <img src="https://picsum.photos/id/1015/400/250" class="active"/>
    <img src="https://picsum.photos/id/1016/400/250"/>
    <img src="https://picsum.photos/id/1018/400/250"/>
</div>
<script>
    const imgs = document.querySelectorAll(".carousel img");
    let idx = 0;
    setInterval(() => {
        imgs[idx].classList.remove("active");
        idx = (idx + 1) % imgs.length;
        imgs[idx].classList.add("active");
    }, 2000);
</script>
</body>
</html>
